window.addEventListener('load', function() {
    // 1. 获取元素
    var arrow_l = document.querySelectorAll('.arrow-l');
    var arrow_r = document.querySelectorAll('.arrow-r');
    var focus = document.querySelectorAll('.focus');
    rotation(arrow_l[0],arrow_r[0],focus[0]);
    rotation_cancel(arrow_l[1],arrow_r[1],focus[1]);
    rotation_cancel(arrow_l[2],arrow_r[2],focus[2]);
    rotation_cancel_l(arrow_l[3],arrow_r[3],focus[3]);
    rotation(arrow_l[4],arrow_r[4],focus[4]);
    //返回顶部模块
    //1. 获取元素
    var sliderbar = document.querySelector('.slider-bar');
    var middle = document.querySelector('.middle');
    //当页面滚动到某个位置时，显示搜索框
    var searchhd = document.querySelector('.search-hd');
    // banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面
    var middleTop = middle.offsetTop;
    // 当我们侧边栏固定定位之后应该变化的数值
    var sliderbarTop = sliderbar.offsetTop - middleTop;
    // 获取main 主体元素
    var grid = document.querySelector('.grid');
    var goBack = document.querySelector('.goBack');
    var gridTop = grid.offsetTop;
    // 2. 页面滚动事件 scroll
    document.addEventListener('scroll', function() {
        // console.log(11);
        // window.pageYOffset 页面被卷去的头部
        // console.log(window.pageYOffset);
        // 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位
        if (window.pageYOffset >= middleTop) {
            sliderbar.style.position = 'fixed';
            sliderbar.style.top = sliderbarTop + 'px';
        } else {
            sliderbar.style.position = 'absolute';
            sliderbar.style.top = '300px';
        }
        // 4. 当我们页面滚动到main盒子，就显示 goback模块
        if (window.pageYOffset >= gridTop) {
            goBack.style.display = 'block';
            searchhd.style.display = 'block';
        } else {
            goBack.style.display = 'none';
            searchhd.style.display = 'none';
        }

    });

    // 3. 当我们点击了返回顶部模块，就让窗口滚动的页面的最上方
    goBack.addEventListener('click', function() {
        // 里面的x和y 不跟单位的 直接写数字即可
        // window.scroll(0, 0);
        // 因为是窗口滚动 所以对象是window
        animate1(window, 0);
    });
    // 改写动画函数，用于返回顶部模块
    function animate1(obj, target, callback) {
        // console.log(callback);  callback = function() {}  调用的时候 callback()

        // 先清除以前的定时器，只保留当前的一个定时器执行
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            // 步长值写到定时器的里面
            // 把我们步长值改为整数 不要出现小数的问题
            // var step = Math.ceil((target - obj.offsetLeft) / 10);
            var step = (target - window.pageYOffset) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (window.pageYOffset == target) {
                // 停止动画 本质是停止定时器
                clearInterval(obj.timer);
                // 回调函数写到定时器结束里面
                // if (callback) {
                //     // 调用函数
                //     callback();
                // }
                callback && callback();
            }
            // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
            // obj.style.left = window.pageYOffset + step + 'px';
            window.scroll(0, window.pageYOffset + step);
        }, 15);
    }
    //关闭头部广告
    var shutdown = document.querySelector('.shutdown');
    var header = document.querySelector('header');
    shutdown.addEventListener('click',function(){
        header.style.display = 'none';
    })
    //shortcut、企业采购、客户服务、手机京东下拉列表
    var limyJD = document.querySelector('.limyJD');
    var myJD = document.querySelector('.myJD');
    var enterprise = document.querySelector('.enterprise');
    var epshopping = document.querySelector('.ep-shopping');
    var ctservice = document.querySelector('.ct-service');
    var servicect = document.querySelector('.service-ct');
    var websitenavigation = document.querySelector('.website-navigation');
    var wbnavigation = document.querySelector('.wb-navigation');
    var phonejd = document.querySelector('.phone-jd');
    var mobilejd = document.querySelector('.mobile-jd');
    limyJD.addEventListener('mouseenter',function(){
        myJD.style.display = 'block';
    });
    limyJD.addEventListener('mouseleave',function(){
        myJD.style.display = 'none';
    });
    enterprise.addEventListener('mouseenter',function(){
        epshopping.style.display = 'block';
    });
    enterprise.addEventListener('mouseleave',function(){
        epshopping.style.display = 'none';
    });
    ctservice.addEventListener('mouseenter',function(){
        servicect.style.display = 'block';
    });
    ctservice.addEventListener('mouseleave',function(){
        servicect.style.display = 'none';
    });
    websitenavigation.addEventListener('mouseenter',function(){
        wbnavigation.style.display = 'block';
    });
    websitenavigation.addEventListener('mouseleave',function(){
        wbnavigation.style.display = 'none';
    });
    phonejd.addEventListener('mouseenter',function(){
        mobilejd.style.display = 'block';
    });
    phonejd.addEventListener('mouseleave',function(){
        mobilejd.style.display = 'none';
    });
    //位置导航下拉列表
    var bjnavg = document.querySelector('.bjnavg');
    var bjnavigtion = document.querySelector('.bj-navigtion');
    var ngbj = document.querySelector('.ng-bj');
    //var bjul = document.querySelector('.bj-ul');
    var lis = document.querySelectorAll('.bj-ul li');
    bjnavg.addEventListener('mouseenter',function(){
        bjnavigtion.style.display = 'block';
    });
    bjnavg.addEventListener('mouseleave',function(){
        bjnavigtion.style.display = 'none';
    });
    //J_popCtn部分
    var gcu_l_ul = document.querySelector('.grid-col1-ul');
    var J_popCtns = document.querySelectorAll('.J_popCtn');
    for(i=0;i<gcu_l_ul.children.length;i++) {
        (function(i) {
            gcu_l_ul.children[i].addEventListener('mouseenter',function() {
                J_popCtns[i].style.display = 'block';
            });
            gcu_l_ul.children[i].addEventListener('mouseleave',function() {
                J_popCtns[i].style.display = 'none';
            });
        })(i);

    }
    //J_popCtn部分结束

    for(i=0;i<lis.length;i++) {
        //console.log(lis[i].children[0]);
        lis[i].children[0].addEventListener('click',function() {
            //console.log(this);//用lis[i].children[0]会报错，未定义children，为什么？
            for(i=0;i<lis.length;i++) {
                lis[i].children[0].className = ' ';
                //console(this.className);  不用this.style.className，直接this.className就行
            }
            this.className = 'bj-current';
            ngbj.innerHTML = this.innerHTML;
        });
    }

    //倒计时模块
    // 1. 获取元素
    var hour = document.querySelector('.hour'); // 小时的黑色盒子
    var minute = document.querySelector('.minute'); // 分钟的黑色盒子
    var second = document.querySelector('.second'); // 秒数的黑色盒子
    var inputTime = +new Date('2020-12-28 22:00:00'); // 返回的是用户输入时间总的毫秒数
    countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白
    // 2. 开启定时器
    setInterval(countDown, 1000);

    function countDown() {
        var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
        var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
        var h = parseInt(times / 60 / 60 % 24); //时
        h = h < 10 ? '0' + h : h;
        hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
        var m = parseInt(times / 60 % 60); // 分
        m = m < 10 ? '0' + m : m;
        minute.innerHTML = m;
        var s = parseInt(times % 60); // 当前的秒
        s = s < 10 ? '0' + s : s;
        second.innerHTML = s;
    }
})